<template>
  <div class="goods-owner list-init" v-if="newDriverMsg.status === 12">
    <div class="address-name">货主信息</div>
    <van-row>
      <van-col span="4" class="photo">
        <img src="../../../assets/image/header.png" alt="" />
      </van-col>
      <van-col span="20" class="owner-msg detail-init">
        <van-row justify="space-between">
          <van-col span="18">{{ msgDetail.name }}</van-col>
          <van-col span="6">
            <span class="authentication" v-if="msgDetail.examineStatus === 1">已认证</span>
            <span class="authentication not-certified" v-else>待认证</span>
          </van-col>
        </van-row>
        <van-row justify="space-between">
          <van-col>
            货主评分
            <!-- <van-rate v-model="stars" color="#FFCA2C" readonly :size="14" /> -->
            <span style="color: #fc9e29">{{ stars }}</span>
          </van-col>
          <van-col @click="enterDetailMsg(UserTypesEm.CARGOOWNER.value)">
            <span class="material">查看详情&nbsp;></span>
          </van-col>
        </van-row>
      </van-col>
    </van-row>
  </div>

  <div class="list-init" v-if="newDriverMsg.status !== 12 && newDriverMsg.status !== 19 && newDriverMsg.status !== 26">
    <div class="address-name">承运信息</div>
    <div class="detail-init">
      <div v-if="newDriverMsg.carrierName" @click="enterDetailMsg(UserTypesEm.CARRIER.value)">
        <van-row justify="space-between">
          <van-col>承运商名称</van-col>
          <van-col>{{ newDriverMsg.carrierName }}</van-col>
        </van-row>
        <van-row justify="space-between">
          <van-col>联系方式</van-col>
          <van-col>{{ newDriverMsg.carrierMobile }}</van-col>
        </van-row>
      </div>
      <div @click="enterDetailMsg(UserTypesEm.DRIVER.value)">
        <van-row justify="space-between">
          <van-col>司机姓名</van-col>
          <van-col>{{ newDriverMsg.driverName }}</van-col>
        </van-row>
        <van-row justify="space-between">
          <van-col>联系方式</van-col>
          <van-col>{{ newDriverMsg.driverMobile }}</van-col>
        </van-row>
        <van-row justify="space-between">
          <van-col>车牌号码</van-col>
          <van-col>{{ newDriverMsg.plateNo }}</van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { api } from '@/http/api'
import { UserTypesEm } from '@/store/enums'
import http from '@/http'

interface Msg {
  name?: string | null
  createTime?: string | null
  examineStatus?: number | null
  detailAddress?: string | null
  consignerContact?: { contactPhone: string }
  consignerGrade?: { totalGrade: number }
  [propName: string]: any
}
interface State {
  consId: string
  msgDetail: Msg
  stars: number
  newDriverMsg: any
}

export default defineComponent({
  props: {
    consId: {
      type: String,
      default: ''
    },
    driverMsg: {
      type: Object,
      require: true
    }
  },
  setup(props) {
    const router = useRouter(),
      route = useRoute()

    const state = reactive<State>({
      consId: '',
      stars: 5,
      msgDetail: {},
      newDriverMsg: {}
    })

    watch([() => props.consId, () => props.driverMsg], ([consId, driverMsg]) => {
      state.newDriverMsg = { ...driverMsg }
      state.consId = consId
      initMagList()
    })

    // 获取数据
    const initMagList = () => {
      http<string>({
        url: api.getCargoOwnerList,
        method: 'post',
        data: { id: state.consId }
        // data: { id: '1422818549776891906' }
      }).then((res: any) => {
        state.msgDetail = res
        state.stars = res.consignerGrade?.totalGrade
      })
    }

    // 点击查看详情
    const enterDetailMsg = (type: number | string) => {
      // router.push({
      //   name: 'CargoOwner',
      //   params: { msgDetail: JSON.stringify(state.msgDetail) }
      // })
      let userId = ''
      if (type === UserTypesEm.CARGOOWNER.value) {
        // 货主
        userId = state.msgDetail.id
      } else if (type === UserTypesEm.DRIVER.value) {
        // 司机
        userId = props?.driverMsg?.driverId ?? ''
      } else if (type === UserTypesEm.CARRIER.value) {
        // 承运商
        userId = props?.driverMsg?.carrierId ?? ''
      }
      if (!userId) {
        return
      }
      router.push({
        name: 'Introduce',
        query: { userType: type, userId }
      })
    }

    return {
      ...toRefs(state),
      enterDetailMsg,
      UserTypesEm
    }
  }
})
</script>

<style lang="scss" scoped>
@import '../css/common.scss';
.goods-owner {
  .photo {
    position: relative;
    img {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 46px;
      height: 46px;
      overflow: hidden;
    }
  }
  .owner-msg {
    .van-row {
      .van-col:first-child {
        color: $color-text-regular;
        @include ellipsis;
      }
    }

    .authentication {
      height: 16px;
      padding: 2px 4px;
      color: #ff004f;
      font-size: 11px;
      border-radius: 2px;
      text-align: center;
      background: rgba(255, 0, 79, 0.02);
      border: 1px solid rgba(255, 0, 79, 0.5);
    }

    .not-certified {
      color: $color-text-secondary;
      border: 1px solid $border-color-light;
      background-color: #fff;
    }

    .material {
      color: $color-primary-light-3;
    }
  }
}
</style>
